import React, { Component } from "react";
import { Button, Icon, message } from "antd";
import Info from "components/info";
import { connect } from "react-redux";
import constants from "share/constants";
import { messages } from "share/common";
import SlideFrame from "components/slide-frame";
import AdvancedTable from "components/advanced-table";
import "styles/request-and-expense-settings/invoice-controls.scss";
import { tableDecorator } from "../decorator";
import InvoiceCheckForm from "../invoice-check-form";
import EditInvoiceControls from "./edit-invoice-controls";
import invoiceManagementService from "../invoice-management.service";

const { SimpleTable } = AdvancedTable;

@tableDecorator
class InvoiceControlsDetails extends Component {
  state = {
    info: {
      attributes: [
        {
          title: messages("expense-3.key154") /*层级*/,
          dataIndex: "levelCode",
          span: 8,
          render: (value) => constants.levelCode[value],
        },
        {
          title: messages("expense-3.key155") /*所属组织*/,
          dataIndex: "levelOrgName",
          span: 8,
        },
        {
          title: messages("expense-3.key59") /*启用公司*/,
          dataIndex: "companyNameList",
          span: 8,
          render: (value) =>
            value ? value.join(",") : messages("expense-3.key60") /*通用*/,
        },
      ],
    },
    columns: [
      "receiptTypeNo",
      "receiptType",
      "invoiceCheck",
      "fieldList",
      "operationSpecial",
    ],
    searchColumns: ["invoiceCheck"],
  };

  controlsRef = null;

  componentDidMount() {
    this.handleInitDate().then();
  }

  handleInitDate = async () => {
    const { info } = this.state;
    const {
      params: { id },
    } = this.props;
    const ret = await invoiceManagementService.getInvoiceControlDetails(id);
    info.dataSource = ret.data;
    this.setState({ info });
  };

  service = (page, pageSize, searchParams) => {
    const {
      params: { id },
    } = this.props;
    return invoiceManagementService.getInvoiceControlDetails(id, {
      page,
      pageSize,
      ...searchParams,
    });
  };

  handleEditDate = () => {
    const { tenant } = this.props;
    const {
      info: { dataSource },
    } = this.state;
    SlideFrame.open(
      {
        title: messages("common.edit") /*编辑*/,
        content: InvoiceCheckForm,
        afterClose: this.afterCloseInvoiceCheckSlideFrame,
        params: {
          tenant,
          tab: "invoice-controls",
          ...dataSource,
        },
      },
      this
    );
  };

  afterCloseInvoiceCheckSlideFrame = (flag) => {
    flag && this.handleInitDate();
  };

  handleRestore = async (res) => {
    const {
      info: {
        dataSource: { receiptDisplayOptId },
      },
    } = this.state;
    const { receiptTypeNo, invoiceCheck } = res;
    await invoiceManagementService.resetInvoiceControlDetails({
      receiptDisplayOptId,
      receiptTypeNo,
      invoiceCheck,
    });
    message.success(messages("expense-3.key183") /*恢复默认成功*/);
    this.controlsRef.getList();
    await this.handleInitDate();
  };

  afterCloseInvoiceControlsSlideFrame = async (value) => {
    if (value) {
      const { info } = this.state;
      info.dataSource.rows.map((item, index) => {
        if (index === value.dataIndex) {
          item.fieldList.map((list) => {
            list.value = value[list.valueCode].id;
            list.valueDesc = value[list.valueCode].name;
            return list;
          });
        }
        return item;
      });
      await invoiceManagementService.newInvoiceControl(info.dataSource);
      this.controlsRef.getList();
      await this.handleInitDate();
    }
  };

  handleEditRecord = (record, dataIndex) => {
    SlideFrame.open(
      {
        title: messages("common.edit") /*编辑*/,
        content: EditInvoiceControls,
        afterClose: this.afterCloseInvoiceControlsSlideFrame,
        params: {
          ...record,
          dataIndex,
        },
      },
      this
    );
  };

  handleBack = () => {
    window.history.go(-1);
  };

  render() {
    const { info } = this.state;
    const { columns, searchColumns } = this.state;
    return (
      <section className="invoice-controls">
        <div style={{ marginBottom: 12 }}>
          <Info
            paragraph
            attributes={[
              {
                title: messages("expense-3.key4") /*说明*/,
                dataIndex: "explain",
                span: 24,
                widthFix: false,
              },
            ]}
            dataSource={{
              explain: messages(
                "expense-3.key184"
              ) /*您可以在此页面按发票类型配置字段 显示/必填/隐藏*/,
            }}
          />
        </div>
        <Info title={messages("expense-3.key159") /*基础设置*/} {...info}>
          <Button onClick={this.handleEditDate} type="primary">
            {messages("common.edit") /*编辑*/}
          </Button>
        </Info>
        <SimpleTable
          onRow={(record, index) => ({
            onClick: () => this.handleEditRecord(record, index),
          })}
          onRef={(ref) => (this.controlsRef = ref)}
          rowKey="displayRuleId"
          columns={this.handleColumns(columns)}
          service={this.service}
          searchForm={this.handleSearchForm(searchColumns)}
          pagination={null}
          footer={
            <a onClick={this.handleBack} className="invoice-controls__a">
              <Icon type="rollback" style={{ marginRight: "5px" }} />
              {messages("common.back") /*返回*/}
            </a>
          }
        ></SimpleTable>
      </section>
    );
  }
}

function mapStateToProps(state) {
  return {
    tenant: state.login.tenant,
  };
}

InvoiceControlsDetails.propTypes = {};

export default connect(mapStateToProps)(InvoiceControlsDetails);
